let laypage = layui.laypage;
let form = layui.form;
// ****************************加载列表

// 接口文档:分页数据
// pagenum:页面
// pagesize:一页要多少条数据
// 好处:后台减少数据量请求
let data = {
  pagenum: 1,
  pagesize: 5
};
list();
function list() {

  $.ajax({
    url: "/my/article/list",
    data: {
      pagenum: data.pagenum,
      pagesize: data.pagesize
    },
    success: function (res) {
      if (res.status == 0) {
        let str = '';
        res.data.forEach(ele => {
          str += `<tr>
                  <td>${ele.title}</td>
                  <td>${ele.cate_name}</td>
                  <td>${ele.pub_date.slice(0, ele.pub_date.length - 4)}</td>
                  <td>${ele.state}</td>
                  <th>
                    <a href="/article/eadt/edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                    <button data-id="${ele.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger btnDelete">删除</button>
                  </th>
                </tr>`;
        });
        $('tbody').html(str)
        page(res.total)
      }
    }
  })
};

// *************************************************分页功能
// 分页模块：
function page(num) {
  laypage.render({
    elem: 'page',
    count: num,
    // 每页多少行
    limit: data.pagesize,
    // 当前在第几页
    curr: data.pagenum,
    // 给用户提供值旋转页码的方式
    limits: [2, 3, 5, 10],
    // 功能选择
    layout: ['prev', 'page', 'next', 'count', 'limit'],
    // 当用户点击的时候,专门函数,执行用户点击行为
    // 列表第一次加载的时候,jump也会执行
    jump: function (obj, key) {
      // key:true第一次执行;undefined用户点击
      // 用户点击
      if (key == undefined) {
        // 当前分页现在状态：页码、要求几条数据、数据总量
        // obj.curr 可以获取点到用户哪个页码；
        data.pagenum = obj.curr;
        data.pagesize = obj.limit;

        list();
      }
    }
  });
};

// ********************************************************分类
$.ajax({
  url: '/my/article/cates',
  success: function (res) {
    if (res.status == 0) {
      let str = `<option value="">请选择文章类别</option>`
      res.data.forEach(item => {
        str += `<option value="${item.Id}">${item.name}</option>`
      });
      $('#category').html(str);
      // form模块：如果表单元素动态插入，好看样式不会跟着动态渲染；
      // 需要调用渲染更新方法；
      form.render('select');
    }
  }
});

$('form').on('submit', function (e) {
  e.preventDefault()

  // 1.收集数据,设置给 全局变量data,可选参数;
  let arr = $(this).serializeArray()

  // 2.设置给全局变量data
  data.cate_id = arr[0].value;
  data.state = arr[1].value;
  // 默认回到该选择项条件下 第一页
  data.pagenum = 1;
  // 再次发出ajax
  list();


})

// ***************************************************删除

$('tbody').on('click', '.btnDelete', function () {
  layer.confirm('你确定要删除吗?', (index) => {
    // 1.获取点击对应id
    let id = $(this).attr('data-id')


    // 2.发送请求
    $.ajax({
      url: '/my/article/delete/' + id,
      success: function (res) {
        layer.msg(res.message)
        if (res.status == 0) {
          data.pagenum = 1
          list()
        }
      }
    })
  })
})